<template>
	<view>
		<view class="padding-top"></view>
		<view class="padding-lr" style="background: #1B1B3B;">
			<view class="item">
				<view class="title">
					<text>{{product.product_name}}</text>
				</view>
				<view class="flex justify-between padding-tb">
					<view class="info">
						<view class="num">{{product.cft_rate}} <text class="sm">%</text></view>
						<view>日收益率</view>
					</view>
					<view class="info">
						<view class="num">{{product.duration}} <text class="sm">天</text></view>
						<view>体验期限</view>
					</view>
					<view class="info">
						<view class="num">{{product.amount}} <text class="sm">usdt</text></view>
						<view>质押金额</view>
					</view>
				</view>
			</view>
		</view>

		<view class="padding">
			<radio-group class="block" @change="RadioChange">
				<view class="cu-form-group pay">
					<view class="title">选择支付方式</view>
				</view>
				<view class="cu-form-group pay">
					<view class="title">usdt</view>
					<radio :class="radio=='usdt'?'checked':''" :checked="radio=='usdt'?true:false" value="usdt"></radio>
				</view>
				<view class="cu-form-group pay">
					<view class="title">epc</view>
					<radio :class="radio=='epc'?'checked':''" :checked="radio=='epc'?true:false" value="epc"></radio>
				</view>
			</radio-group>
		</view>
		
		<u-keyboard default="778" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false"
		 v-model="show" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 paymoney">
					<text>{{radio=='usdt' ? usdt_price : epc_price}}</text>
					<text class="u-font-20 u-padding-left-10">{{radio}}</text>
					<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="false"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
			</view>
		</u-keyboard>

		<!-- <view class="padding margin-top">
			<view class="flex beizhu">
				<view style="white-space: nowrap;">备注：</view>
				<view>
					<view>每日收益{{product.cft_rate}}%，本金周期到期后自动退出，时间未到退出扣{{fee}}%手续费。</view>
					<view></view>
				</view>
			</view>
		</view> -->

		<view class="padding-lg margin-top-lg">
			<u-button class="margin-top" type="success" @click="show=true">去支付</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				password: '',
				radio: 'usdt',
				show: false,
				product: '',
				epc_price: '',
				usdt_price: '',
				fee: ''
			};
		},
		onLoad(opt) {
			this.id = opt.id
			this.getDetail();
		},
		methods: {
			getDetail() {
				this.$u.get('/cft/product/detail?id='+this.id).then(res => {
					let data = res.data.result
					this.epc_price = data.epc_price
					this.usdt_price = data.usdt_price
					this.product = data.product
					this.fee = data.fee
				})
			},
			RadioChange(e) {
				this.radio = e.detail.value;
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					this.pay();
				}
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			pay() {
				uni.showLoading({
					title: "支付中"
				});
				this.$u.post('/cft/pay', {
					pay_password: this.password,
					pay_type: this.radio,
					product_id: this.id
				}).then(res => {
					this.show = false
					if (res.data.code == 0) {
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
						this.$u.route({
							url: '/pages/pledge/profit-list',
							type: 'redirect'
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			showPop(flag = true) {
				this.password = "";
				this.show = flag;
			},
		}
	}
</script>

<style lang="scss">
	.item {
		padding: 30rpx 0;
		color: #888888;

		.title {
			color: #fff;
			font-size: 30rpx;
			letter-spacing: 2rpx;
			font-weight: bold;
		}

		.info {
			width: 33.33%;
			font-size: 24rpx;
			font-weight: bold;
			letter-spacing: 2rpx;

			&:nth-of-type(2) {
				text-align: center;
			}

			&:nth-of-type(3) {
				text-align: right;
			}

			.num {
				color: #00D28B;
				font-size: 40rpx;
				margin: 16rpx 0;
			}

			.sm {
				font-size: 24rpx;
			}
		}
	}

	.title {
		font-size: 30rpx;
		color: #B8B8BF;
	}

	.select {
		width: 100%;
		height: 86rpx;
		background: rgba(27, 27, 59, 1);
		border-radius: 12rpx;
		color: #B8B8BF;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
	}

	.beizhu {
		color: #B8B8BF;
	}

	.pay {
		background: #141439;
		color: #fff;
	}

	.cu-form-group+.cu-form-group {
		border: none;
	}

	.paymoney {
		font-size: 50rpx;
		color: $u-type-warning;
		position: relative;

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}

	.tips {
		color: $u-tips-color;
	}
</style>
